<template>
  <div class="container">
    <div class="m-title"><span class="icon"></span>新建关键人信息</div>
    <div style="position: relative">
      <el-tabs v-model="keyPersonActiveName" @tab-click="handleClick">
        <el-tab-pane label="可用关键人" name="first">
          <el-form
            ref="keyPersonFormDataRef"
            :label-position="labelPosition"
            label-width="100px"
          >
            <el-row :gutter="10">
              <el-col :span="6">
                <div>
                  <el-form-item label="关键人名称">
                    <el-input
                      placeholder="请输入内容"
                      v-model="keyPersonFormData.keyPersonName"
                      class="input-with-select"
                    >
                    </el-input>
                  </el-form-item>
                </div>
              </el-col>
              <el-col :span="6">
                <div>
                  <el-form-item label="关键人类型">
                    <el-select
                      v-model="keyPersonFormData.keyPersonTypeValue"
                      placeholder="请选择"
                      class="select-box"
                    >
                      <el-option
                        v-for="(item, index) in keyPersonType"
                        :label="item.name"
                        :value="item.code"
                        :key="index"
                      ></el-option>
                    </el-select>
                  </el-form-item>
                </div>
              </el-col>
              <el-col :span="2">
                <el-button
                  type="primary"
                  icon="el-icon-search"
                  size="small"
                  @click="keyPersonQuery"
                  >查询</el-button
                >
              </el-col>
            </el-row>
          </el-form>
          <DicTable
            ref="keyPersonTable"
            stripe
            border="full"
            align="center"
            highlight-current-row
            :columnData="keyPersonColumns"
            :tableData="keyPersonTableData"
            :loading="keyPersonTableLoading"
            :currentPage="parseInt(keyPersonTablePage.pageIndex)"
            :pageSize="parseInt(keyPersonTablePage.pageSize)"
            :totalResult="parseInt(keyPersonTablePage.rowCount)"
            :pager="true"
            @on-page-change="keyPersonHandlePageChange"
            @checked-data="checkedData"
          >
            <template #opt="{ row }">
              <el-button type="text" class="optbtn" @click="keyPersonToView(row)"
                >查看</el-button
              >
              <el-button type="text" class="optbtn" @click="editKeyPerson(row)"
                >修改</el-button
              >
              <el-button type="text" class="optbtn" @click="delateKeyPerson(row)"
                >删除</el-button
              >
            </template>
          </DicTable>
        </el-tab-pane>
        <el-tab-pane label="已删除关键人" name="second">
          <el-form :label-position="labelPosition" label-width="100px">
            <el-row :gutter="10">
              <el-col :span="6">
                <div>
                  <el-form-item label="关键人名称">
                    <el-input
                      placeholder="请输入内容"
                      v-model="delateFormData.keyPersonName"
                      class="input-with-select"
                    >
                    </el-input>
                  </el-form-item>
                </div>
              </el-col>
              <el-col :span="6">
                <div>
                  <el-form-item label="关键人类型">
                    <el-select
                      v-model="delateFormData.keyPersonTypeValue"
                      placeholder="请选择"
                      class="select-box"
                    >
                      <el-option
                        v-for="(item, index) in keyPersonType"
                        :label="item.name"
                        :value="item.code"
                        :key="index"
                      ></el-option>
                    </el-select>
                  </el-form-item>
                </div>
              </el-col>
              <el-col :span="2">
                <el-button
                  type="primary"
                  size="small"
                  icon="el-icon-search"
                  @click="keyPersonQuery"
                  >查询</el-button
                >
              </el-col>
            </el-row>
          </el-form>
          <DicTable
            ref="keyPersonTable"
            align="center"
            stripe
            border="full"
            highlight-current-row
            :columnData="delateKeyPersonColumns"
            :tableData="delateKeyPersonTableData"
            :loading="delateKeyPersonTableLoading"
            :currentPage="parseInt(delateKeyPersonTablePage.pageIndex)"
            :pageSize="parseInt(delateKeyPersonTablePage.pageSize)"
            :totalResult="parseInt(delateKeyPersonTablePage.rowCount)"
            :pager="true"
            @on-page-change="keyPersonHandlePageChange"
          >
          </DicTable>
        </el-tab-pane>
      </el-tabs>
      <!-- <el-button
        size="mini"
        @click="returnPage"
        style="position: absolute; right: 20px; top: 0"
        >返回</el-button
      >
      <el-button size="mini" class="u-btn" @click="newKeyPerson" v-show="isShow"
        >新建</el-button
      > -->
       <el-button size="mini" type="primary" class="u-return-btn" @click="returnPage"
        >返回</el-button
      >
     <el-button
        size="mini"
        type="primary"
        class="u-add-btn"
        @click="newKeyPerson"
        >新建</el-button
      >
      <el-button
        size="mini"
        type="primary"
        class="u-delate-btn"
        v-show="isShow"
        @click="batchDel"
        >批量删除</el-button
      >
      <new-key-person-add
        :title="title"
        :newKeyPersonVisible="newKeyPersonVisible"
        :keyPersonType ="keyPersonType"
        :formData ="watchInfo"
        @closeDialog="closeDialog"
        @addKeyInfo="addKeyInfo"
      ></new-key-person-add>
    </div>
    <el-dialog
      width="60%"
      title="关键人基本信息"
      :visible.sync="outerVisible"
      append-to-body
    >
      <el-row>
        <el-col :span="8">
          <el-col :span="12"><div class="u-name">关键人姓名:</div></el-col>
          <el-col :span="12"
            ><div class="u-value">{{ watchInfo.keyPersonName }}</div></el-col
          >
        </el-col>
        <el-col :span="8">
          <el-col :span="12"><div class="u-name">关键人类型:</div></el-col>
          <el-col :span="12"
            ><div class="u-value">{{ watchInfo.keyPersonTypeName }}</div></el-col
          >
        </el-col>
        <el-col :span="8">
          <el-col :span="12"><div class="u-name">出生日期:</div></el-col>
          <el-col :span="12"
            ><div class="u-value">{{ watchInfo.birthday }}</div></el-col
          >
        </el-col>
        <el-col :span="8">
          <el-col :span="12"><div class="u-name">部门:</div></el-col>
          <el-col :span="12"
            ><div class="u-value">{{ watchInfo.dept }}</div></el-col
          >
        </el-col>
        <el-col :span="8">
          <el-col :span="12"><div class="u-name">职务:</div></el-col>
          <el-col :span="12"
            ><div class="u-value">{{ watchInfo.position }}</div></el-col
          >
        </el-col>
        <el-col :span="8">
          <el-col :span="12"><div class="u-name">联系电话:</div></el-col>
          <el-col :span="12"
            ><div class="u-value">{{ watchInfo.contactPhone }}</div></el-col
          >
        </el-col>
        <el-col :span="8">
          <el-col :span="12"><div class="u-name">电子邮箱:</div></el-col>
          <el-col :span="12"
            ><div class="u-value">{{ watchInfo.contactEmail }}</div></el-col
          >
        </el-col>
        <el-col :span="16">
          <el-col :span="6"><div class="u-name">决策影响力:</div></el-col>
          <el-col :span="18"
            ><div class="u-value">{{ watchInfo.decisionAffect }}</div></el-col
          >
        </el-col>
      </el-row>
      <div style="height: 50px"></div>
    </el-dialog>
  </div>
</template>

<script>
import DicTable from "@/components/public/DicTable";
import DicCustomerBtnDrawer from "@/components/customer/form/DicCustomerBtnDrawer";
import NewKeyPersonAdd from "@/views/customer/customer-dialog/NewKeyPersonAdd";
import NewKeyPerson from "@/api/customer/NewKeyPerson";
export default {
  name: "NewKeyPerson",
  data() {
    return {
      isShow: true,
      labelPosition: "left",
      // 关键人信息弹窗内的内容
      // 默认显示哪一个tab
      keyPersonActiveName: "first",
      keyPersonTableLoading: false,
      keyPersonFormData: {
        keyPersonName:'',//关键人姓名
        keyPersonTypeValue:'',//关键人类型
      },
      delateFormData: {
        keyPersonName:'',//关键人姓名
        keyPersonTypeValue:'',//关键人类型
      },
      //已删除关键人
      delateKeyPersonTableLoading: false,
      keyPersonType: [
      ], //关键人类型
      keyPersonColumns: [
        { type: "checkbox", width: 60 },
        {
          field: "keyPersonName",
          title: "关键人名称",
          // width: 150,
          showOverflow: true,
        },
        {
          field: "keyPersonTypeName",
          title: "关键人类型",
          // width: 150,
          showOverflow: true,
        },
        {
          field: "birthday",
          title: "出生日期",
          // width: 150,
          showOverflow: true,
        },
        { field: "contactPhone", title: "联系电话",  showOverflow: true },
        { field: "contactEmail", title: "电子邮箱",  showOverflow: true },
        { field: "dept", title: "部门",  showOverflow: true },
        { field: "position", title: "职务", showOverflow: true },
        {
          field: "decisionAffect",
          title: "决策影响力",
          // width: 200,
          showOverflow: true,
        },
        { slotName: "opt",width: 220,  title: "操作" },
      ],
      keyPersonTableData: [
      ],//关键人列表
      // 可用关键人信息-分页
      keyPersonTablePage: {
        pageIndex: 1,
        pageSize: 5,
        rowCount: 10,
      },
      delateKeyPersonTablePage: {
        pageIndex: 1,
        pageSize: 5,
        rowCount: 10,
      },
      delateKeyPersonColumns: [
        {
          field: "keyPersonName",
          title: "关键人名称",
          showOverflow: true,
        },
        {
          field: "keyPersonTypeName",
          title: "关键人类型",
          showOverflow: true,
        },
        {
          field: "birthday",
          title: "出生日期",
          showOverflow: true,
        },
        { field: "contactPhone", title: "联系电话", showOverflow: true },
        { field: "contactEmail", title: "电子邮箱", showOverflow: true },
        { field: "dept", title: "部门", showOverflow: true },
        { field: "position", title: "职务", showOverflow: true },
        {
          field: "decisionAffect",
          title: "决策影响力",
          width: 200,
          showOverflow: true,
        },
      ],
      delateKeyPersonTableData: [
        
      ],
      outerVisible: false, //查看信息弹窗
      watchInfo: {}, //当前查看的关键人信息
      newKeyPersonVisible: false, //新建或者修改弹窗显隐
      optType:1,//区分修改或者新增
      custKeyPersonRelId:'',//修改操作需要传关键人主建
      tabIndex:0,//tab切换index
      title:'新建关键人信息',
      checkedList:[],//选中的列表
    };
  },
  components: {
    DicTable,
    DicCustomerBtnDrawer,
    NewKeyPersonAdd,
  },
  created() {},
  mounted() {
      this.initValue();
  },
  methods: {
    //初始化下拉值
    async initValue(){
       const response = await NewKeyPerson.initValue({flag:'key_person_type'});
       if(response.code == 200){
          this.keyPersonType = response.meta.customers
          this.getKeyList();//获取初始化列表
       } 
    },
    async getKeyList(val){
      let parmas = {
        pageIndex:val ? val.currentPage : 1,
        pageSize:val ? val.pageSize : 5,
        custId:this.$route.query.custId,
        keyPersonType:this.tabIndex == 0 ? this.keyPersonFormData.keyPersonTypeValue : this.delateFormData.keyPersonTypeValue,
        keyPersonNameLike:this.tabIndex == 0 ? this.keyPersonFormData.keyPersonName : this.delateFormData.keyPersonName,
        statusCds:this.tabIndex == 0 ? '1000':'1100'
      }
      const response = await NewKeyPerson.getCustKeyPersonRelList(parmas);
      if(response.code == 200){
        if(this.tabIndex == 0){
          this.keyPersonTableData = response.meta.resultObject.keyPersonList
          this.keyPersonTablePage.rowCount = response.meta.resultObject.pageInfo.rowCount
          this.keyPersonTableData.forEach(item=>{
          item.birthday = item.birthday ?
            item.birthday.substring(0, 4) +
            "-" +
            item.birthday.substring(4, 6) +
            "-" +
            item.birthday.substring(6, 8) +
            " "  : ''
          this.keyPersonType.forEach(i =>{
            if(item.keyPersonType == i.code){
              item.keyPersonTypeName = i.name
            }
          })
        })
        }else {
          this.delateKeyPersonTableData = response.meta.resultObject.keyPersonList
          this.delateKeyPersonTablePage.rowCount = response.meta.resultObject.pageInfo.rowCount
          this.delateKeyPersonTableData.forEach(item=>{
            item.birthday = item.birthday ?
              item.birthday.substring(0, 4) +
              "-" +
              item.birthday.substring(4, 6) +
              "-" +
              item.birthday.substring(6, 8) +
              " "  : ''
            this.keyPersonType.forEach(i =>{
              if(item.keyPersonType == i.code){
                item.keyPersonTypeName = i.name
              }
            })
          })
        }
      } 
    },
    handleClick(tab, event) {
      if (tab.index == "0") {
        this.keyPersonFormData={
          keyPersonName:'',//关键人姓名
          keyPersonTypeValue:'',//关键人类型
        },
        this.isShow = true;
        this.tabIndex = 0;
        this.getKeyList()
      } else {
        this.delateFormData = {
          keyPersonName:'',//关键人姓名
          keyPersonTypeValue:'',//关键人类型
        },
        this.isShow = false;
        this.tabIndex = 1;
        this.getKeyList()
      }
    },
    //可用关键人查询
    keyPersonQuery() {
      this.getKeyList()
    },
    // 新建关键人信息表格
    keyPersonHandlePageChange(val) {
      if(this.tabIndex == 0){
        this.keyPersonTablePage.pageIndex = val.currentPage;
        this.keyPersonTablePage.pageSize =  val.pageSize;
      }else {
        this.delateKeyPersonTablePage.pageIndex = val.currentPage;
        this.delateKeyPersonTablePage.pageSize =  val.pageSize;
      }
      this.getKeyList(val)
    },
    // 新建关系人-查看
    keyPersonToView(row) {
      this.outerVisible = true;
      this.watchInfo =Object.assign({},row);
    },
    // 新建关系人-修改
    editKeyPerson(row) {
      this.newKeyPersonVisible = true;
      this.optType = 2;
      this.title = '修改关键人信息'
      this.watchInfo =Object.assign({},row);
      this.custKeyPersonRelId = row.custKeyPersonRelId;
    },
    //选中操作
    checkedData(val) {
      this.checkedList = val;
    },
    // 新建关系人-批量删除
    batchDel(){
      let custKeyIdList = {
        custKeyPersonRelId:''
      };
      if(this.checkedList.length != 0){
        this.checkedList.forEach((item) => {
            custKeyIdList["custKeyPersonRelId"] += item.custKeyPersonRelId + ",";
        });
        custKeyIdList["custKeyPersonRelId"] = custKeyIdList["custKeyPersonRelId"].substr(
          0,
          custKeyIdList["custKeyPersonRelId"].length - 1
        );
        this.delateKeyPerson(custKeyIdList);
      }else {
        this.$alert('请至少选择一个关键人','提示',{type:'warning'})  
      }
    },
    // 新建关键人-删除
    delateKeyPerson(row) {
      this.$confirm("确认删除该关键人吗？", "提示", {
        confirmButtonText: "确定",
        type: "warning",
        cancelButtonText: "取消",
      })
        .then(async () => {
          let parmas = {
            actType: "DEL",
            custId: this.$route.query.custId,
            custKeyPersonRelIdList: row.custKeyPersonRelId,//关键人主键
            staffId: this.$route.query.staffId
          }
          const response = await NewKeyPerson.custKeyPersonRel(parmas);
          if(response.code == 200){
            if(response.meta.resultCode == 0){
              this.getKeyList()
            }else {
              this.$message.error(response.meta.resultMsg);
            }
          }
        })
        .catch(() => {});
    },
    //
    newKeyPerson() {
      this.newKeyPersonVisible = true;
      this.watchInfo = {};
      this.optType = 1;
      this.title = '新建关键人信息'
    },
    closeDialog() {
      this.newKeyPersonVisible = !this.newKeyPersonVisible;
    },
    async addKeyInfo(val){
      let parmas = {
        actType: this.optType == 1 ? 'ADD':'MOD',
        custId: this.$route.query.custId,     //客户id
        createStaff: this.$route.query.staffId,   //用户
        keyPersonType: val.keyPersonType,  //关键人类型
        keyPersonName: val.keyPersonName, //关键人名称
        birthday: val.birthday,  //生日
        dept: val.dept,   //部门
        position: val.position,  //职务
        contactPhone: val.contactPhone,   //联系电话
        contactEmail: val.contactEmail,  //电子邮箱
        decisionAffect: val. decisionAffect //决策影响力
      }
      if(this.optType == 2){
        parmas['custKeyPersonRelId'] = this.custKeyPersonRelId;
      }
      const response = await NewKeyPerson.custKeyPersonRel(parmas);
      if(response.code == 200){
         if(response.meta.resultCode == 0){
           this.newKeyPersonVisible = false;
           this.getKeyList();
         }else {
           this.$message.error(response.meta.resultMsg);
         }
      }

    },
    returnPage() {
      this.$router.push({
        path: "/custbaseinf",
        query: {
          // partyId: "2102",
          // staffId: "100078",
          // type: "customerAdd",
        },
      });
    },
  },
};
</script>
<style lang="scss" scoped>
.container {
  padding: 0.2rem;
  height: 100%;
  background-color: #fff;
}
.m-title {
  margin-bottom: 20px;
  color: #0052d9;
  font-size: 12px;
}
.m-title .icon {
  float: left;
  display: block;
  width: 4px;
  height: 12px;
  background: #f56f3c;
  margin-top: 2px;
  margin-right: 10px;
  font-size: 14px;
}
.tabs-box {
  position: relative;
}
.u-btn {
  position: absolute;
  right: 85px;
  top: 0;
}
.u-name {
  text-align: right;
  font-size: 13px;
  color: #333;
  line-height: 0.4rem;
}
.u-return-btn {
  position: absolute;
  right: 0.1rem;
  top: 0px;
}
.u-add-btn {
  position: absolute;
  right: 0.75rem;
  top: 0px;
}
.u-delate-btn {
  position: absolute;
  right: 1.4rem;
  top: 0px;
}
.u-value {
  text-align: left;
  font-size: 13px;
  color: #999;
  line-height: 0.4rem;
}
.optbtn {
  margin-left: 0;
}
</style>
